$inputRadius: 2px;
$inputFontSize: 14px;

$inputWidthXL: 320px;
$inputHeightXL: 40px;
$inputWidthMD: 242px;
$inputHeightMD: 26px;
$inputWidthSM: 82px;
$inputHeightSM: 26px;

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: $Gray_light;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: $Gray_light;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: $Gray_light;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: $Gray_light;
}

/* xl */
.input-xl {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $inputRadius;
  height: $inputHeightXL;
  width: $inputWidthXL;
  background-color: transparent;
  font-size: $inputFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
  caret-color: $Primary;
}

.input-xl:focus {
  border: 1px solid $Primary;
}

.input-xl:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

.input-xl:read-only {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

/* md */
form input.text,
.input-md {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $inputRadius;
  height: $inputHeightMD;
  width: $inputWidthMD;
  background-color: transparent;
  font-size: $inputFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
  caret-color: $Primary;
}

form input.text:focus,
.input-md:focus {
  border: 1px solid $Primary;
}

form input.text:disabled,
.input-md:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

form input.text:read-only,
.input-md:read-only {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

/* sm */
.input-sm {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $inputRadius;
  height: $inputHeightSM;
  width: $inputWidthSM;
  background-color: transparent;
  font-size: $inputFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
  caret-color: $Primary;
}

.input-sm:focus {
  border: 1px solid $Primary;
}

.input-sm:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

.input-sm:read-only {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}
